<template>
  <master title="答题">

    <div>
      <button class="fixed-button" @click="toAnwser">开始答题</button>
    </div>

    <el-row style="width: 90%;text-align: center;margin-top: 30px">
      <h1>{{title}}</h1>
      <p style="margin-top: 20px">{{remark}}</p>

    </el-row>
    <el-row style="width: 90%;padding: 30px">
      <div style="padding: 30px">
        <div style="margin-top: 20px;width: 100%;line-height: 100px;margin-top: 20px">

            <div class="my_topic" v-for="(site,index) in rows" :key="index">
              <h2><span v-if="index==0">一、</span>
                <span v-if="index==1">二、</span>
                <span v-if="index==2">三、</span>
                <span v-if="index==3">四、</span>
                <span v-if="index==4">五、</span>
                {{site.title}}</h2>
              <div class="choice_topic" v-for="(siteTopic,index) in site.topicList" :key="index">

                  <div class="choice_topic_li">{{siteTopic.sortNo}}、{{siteTopic.question}}
                      <div class="choice_topic_li" v-for="site1 in siteTopic.optionArr" >

                        <!-- <el-checkbox v-model="checked">{{site1}} </el-checkbox>-->
                        <el-radio   label="site1">{{site1}}</el-radio>

                      </div>
                  </div>
              </div>
            </div>
        </div>
      </div>
    </el-row>
  </master>
</template>
<script type="text/javascript">
(function (G) {
G.vue({
  "usingComponents": {///引入组件
    "master": "/components/Master/Master"///母版组件
  },
  "enablePullDownRefresh": true
},{
  data:{
    practiceId:'',
    title:'',
    remark:'',
    rows:[]
  },
  methods:{

    getList() {
      G.get('{JAVAURL}/sp-practice/practiceInfo1', {practiceId:this.practiceId}).then((res) => {

        this.title = res.data.practice.name;
        this.remark = res.data.practice.remark;
        this.rows =  res.data.list;
        //this.drawer = false;
      });
    },
    toAnwser(row){
      G.$go('/pages/practice/info?practiceId='+this.practiceId)
    },

  },

  mounted(query) {
    const practiceId = query.practiceId;
    this.practiceId = practiceId;
    this.getList();
  }
});
})(Y)
</script>
<style >
  .my_topic .choice_topic{

    width: 95%;
    padding: 10px;
    margin: 0px;

  }
  .choice_topic_li{
    width: 95%;
    margin: 0px;
    padding: 5px;
    line-height: 30px;

  }

  .fixed-button {
    font-size: 20px;
    position: fixed; /* 固定位置 */
    bottom: 80px; /* 距离底部20px */
    right: 80px; /* 距离右侧20px */
    padding: 10px 20px; /* 内边距 */
    background-color: #007BFF; /* 背景颜色 */
    color: white; /* 文字颜色 */
    border: none; /* 无边框 */
    border-radius: 50%; /* 圆形按钮 */
    cursor: pointer; /* 鼠标悬停时显示指针 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  }



  .fixed-button:hover {
    background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
  }


</style>
